import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import Select, { Option } from '@kuiper-components/select';

import { FREQUENCY_NUMBERS, FREQ_UNIT_MAP } from '../../../common/constants';
import Text from '../Text';
import s from './CollectFrequency.module.css';
import ms from 'ms';

const timeRegex = /^(?<num>\d+)(?<unit>[a-zA-Z]+)?$/;

export default function CollectFrequency({
	className,
	viewmode,
	value,
	numbers,
	onChange,
	maxFreq,
	unitDisabled,
	getDropdownContainer,
	disabled,
}) {
	if (typeof value === 'object') {
		value = 0;
	}
	let unit;
	let num;
	if (value) {
		const freq = ms(value);
		unit = value ? freq.replace(/\d*/, '') : 'd';
		num = parseInt(freq.replace(/[a-zA-Z]/, ''), 10);
		if (value % ms('30d') === 0) {
			unit = 'month';
			num = value / ms('30d');
		} else if (value % ms('1w') === 0) {
			unit = 'w';
			num = value / ms('1w');
		}
	}
	// 传入 值小于maxFreq
	if (maxFreq && value && unit && value < maxFreq) {
		const {
			groups: { num, unit },
		} = ms(maxFreq).match(timeRegex) || { groups: {} };
		// onChange({ num: parseInt(num, 10), unit });
		onChange(ms(`${num}${unit}`));
	}

	const handleChange = ({ num, unit }) => {
		let num_ = num;
		let unit_ = unit;
		if (unit === 'month') {
			num_ = num * 30;
			unit_ = 'd';
		}
		if (ms(`${num_ || 1}${unit_ || 's'}`) < maxFreq) {
			onChange(maxFreq);
			return;
		}
		onChange(ms(`${num_}${unit_}`));
	};

	if (viewmode) {
		return (
			<div className={cn(className, s.collectFrequency)}>
				<Text value={num} />
				{FREQ_UNIT_MAP[unit] || unit}
			</div>
		);
	}
	return (
		<div className={cn(className, s.collectFrequency)}>
			<Select
				className={s.num}
				value={num}
				onChange={num => handleChange({ unit, num })}
				getPopupContainer={getDropdownContainer}
				disabled={disabled}
			>
				{numbers.map(n => {
					return (
						<Option
							key={n}
							value={n}
							disabled={maxFreq && unit ? ms(n + unit) < maxFreq : false}
						>
							{n}
						</Option>
					);
				})}
			</Select>
			{unitDisabled ? (
				<span className={s.text}>{FREQ_UNIT_MAP[unit]}</span>
			) : (
				<Select
					className={s.unit}
					value={FREQ_UNIT_MAP[unit]}
					onChange={unit => handleChange({ num, unit })}
					getPopupContainer={getDropdownContainer}
					disabled={disabled}
				>
					{Object.entries(FREQ_UNIT_MAP).map(([val, label]) => {
						let time = ms(num + val);
						if (val === 'month') {
							time = ms(`${num * 30}d`);
						} else if (val === 'w') {
							time = ms(`${num * 7}d`);
						} else if (val === 'd') {
							time = ms(`${num * 6}d`);
						} else if (val === 'h') {
							time = ms(`${num * 23}h`);
						} else if (val === 'm') {
							time = ms(`${num * 59}m`);
						}
						if (maxFreq && maxFreq <= time) {
							return (
								<Option key={val} value={val}>
									{label}
								</Option>
							);
						} else {
							return null;
						}
					})}
				</Select>
			)}
		</div>
	);
}

CollectFrequency.propTypes = {
	className: PropTypes.string,
	viewmode: PropTypes.bool,
	numbers: PropTypes.arrayOf(PropTypes.number.isRequired),
	value: PropTypes.number.isRequired,
	onChange: PropTypes.func.isRequired,
	maxFreq: PropTypes.number,
	unitDisabled: PropTypes.bool,
	getDropdownContainer: PropTypes.func,
	disabled: PropTypes.bool,
};

CollectFrequency.defaultProps = {
	className: s.collectFrequency,
	viewmode: false,
	numbers: FREQUENCY_NUMBERS,
	value: 0,
	onChange: () => {},
	unitDisabled: false,
	getDropdownContainer: triggerNode => triggerNode,
};
